<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <!-- Required meta tags -->

  <link rel="stylesheet" th:href="@{/css/feather.css}">
  <link rel="stylesheet" th:href="@{/css/themify-icons.css}">
  <link rel="stylesheet" th:href="@{/css/vendor.bundle.base.css}">
  <!-- endinject -->
  <!-- Plugin css for this page -->
  <link rel="stylesheet" th:href="@{/css/dataTables.bootstrap4.css}">
  <link rel="stylesheet" th:href="@{/css/themify-icons.css}">
  <link rel="stylesheet" type="text/css" th:href="@{/css/select.dataTables.min.css}">
  <!-- End plugin css for this page -->
  <!-- inject:css -->
  <link rel="stylesheet" th:href="@{/css/style.css}">
  <!-- endinject -->

</head>
<body>

<!--总布局-->
<div class="container-scroller">
  <!--    导航模版-->
  <div th:replace="~{common :: topBar}"></div>
  <div class="container-fluid page-body-wrapper" >
    <div th:replace="~{common :: lay1}"></div>
    <div th:replace="~{common :: lay2}"></div>
<!--    <div th:replace="~{common :: sideBar}"></div>-->

    <!--    动手div-->
    <div class="main-panel" style="margin: 0 auto;width: 90%;padding-top: 120px;">
      <div class="content-wrapper">
        <div>
          <!--通过标识码提供下载链接-->
          <div class="form-group">
            <div class="input-group col-xs-12">
              <input type="text" class="form-control file-upload-info"  placeholder="请输入您的标识码：">
              <span class="input-group-append">
                <button class="file-upload-browse btn btn-primary" type="button" onclick="table_data()">Search</button>
              </span>
            </div>
          </div>
          <div id="table" style="visibility:hidden">
            <table class="table table-bordered">
              <thead class="thead-dark">
              <tr>
                <th scope="col">UUID</th>
                <th scope="col">Function</th>
                <th scope="col">File_Type</th>
                <th scope="col">Download</th>
              </tr>
              </thead>
              <tbody id="table_data">
              <tr>
                <td style="width: 30%"></td>
                <td style="width: 40%"></td>
                <td style="width: 20%"></td>
                <td></td>
              </tr>
              <tr>
                <td style="width: 30%"></td>
                <td style="width: 40%"></td>
                <td style="width: 20%"></td>
                <td></td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>


<!-- plugins:js -->
<script th:src="@{/js/vendor.bundle.base.js}"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script th:src="@{/js/Chart.min.js}"></script>
<script th:src="@{/js/jquery.dataTables.js}"></script>
<script th:src="@{/js/dataTables.bootstrap4.js}"></script>
<script th:src="@{/js/dataTables.select.min.js}"></script>

<!-- End plugin js for this page -->
<!-- inject:js -->
<script th:src="@{/js/off-canvas.js}"></script>
<script th:src="@{/js/hoverable-collapse.js}"></script>
<script th:src="@{/js/template.js}"></script>
<script th:src="@{/js/settings.js}"></script>
<script th:src="@{/js/todolist.js}"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script th:src="@{/js/dashboard.js}"></script>
<script th:src="@{/js/Chart.roundedBarCharts.js}"></script>
<script src="/js/jquery.js"></script>
<script src="/js/axios.js"></script>
<!-- End custom js for this page-->
</body>
</html>

<script>

  //获取表格的数据，UUID,功能、文件类型、下载链接
  function table_data() {
    document.getElementById("table").style.visibility = "visible"
    data = [
        {
        "UUID": "23566",
        "Function": "5555",
        "File_Type": '1111'
      },
      {
        "UUID": "23111566",
        "Function": "55111155",
        "File_Type": '1122211'
      },
    ]
    var tr = $("#table_data tr");
    var len = tr.length
    console.log(len)
    for (var i=0; i<len; i++){
      if(i >= data.length)
        break;
      var td = $(tr[i]).find("td")
      $(td[0]).html(data[i]["UUID"])
      $(td[1]).html(data[i]["Function"])
      $(td[2]).html(data[i]["File_Type"])
      $(td[3]).html("<button class=\"file-upload-browse btn btn-primary\" type=\"button\" style='float: right;'>Download</button>")
    }
  }
</script>